<template>
  <div class="root">
    <Header></Header>

    <div class="main">
      <div class="type">
        <span
          v-for="(item, i) in labels[type]"
          :key="i"
          :class="i === activeIndex ? 'active' : 'typeSpan'"
          @click="(activeIndex = i), (uploadUrl = tmpUlr + item.type)"
          >{{ item.name }}</span
        >
        {{ uploadUrl }}
        <!-- <span>通用文字</span>
        <span>通用表格</span>
        <span>智能分类</span> -->
      </div>
      <div class="content">
        <section class="left">
          <el-upload
            v-show="uploadShow"
            class="upload-demo"
            drag
            :action="uploadUrl"
            multiple
            :on-success="uploadSuccess"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <div class="demo-image__preview" v-show="!uploadShow">
            <img
              class="cancel"
              src="../../assets/cancel.png"
              v-on:click="uploadShow = true"
            />
            <el-image class="uploadImg" :src="url" :preview-src-list="srcList">
            </el-image>
          </div>
        </section>
        <section class="right">
          <p v-show="uploadShow">这是解析图片获得的文字</p>
          <p v-show="!uploadShow" v-html="text" class="text"></p>
        </section>
      </div>

      <div class="demo">
        <p>案例</p>
        <img src="../..//assets/img-1.png" alt="" />
        <img src="../../assets/img-2.png" alt="" />
        <img src="../../assets/img-3.png" alt="" />
        <img src="../../assets/img-4.png" alt="" />
      </div>
    </div>
  </div>
</template>
  
  <script>
// import HelloWorld from './components/HelloWorld.vue'
// import UploadFile from "./components/UploadFile.vue";
import Base_URL from "../../utils/common.js";
import Header from "../../components/Header.vue";

export default {
  name: "DemoIndex",
  components: {
    Header,
  },
  data() {
    return {
      activeIndex: 0,
      type: 1,
      uploadUrl: Base_URL + "upload",
      tmpUlr: Base_URL + "upload?type=",
      text: "这是解析图片获得的文字",
      ocrType: 1,
      imgType: "word",
      uploadShow: true,
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        // 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      fileList: [],
      labels: {
        1: [
          { type: "text", name: "通用文字" },
          { type: "text", name: "通用表格" },
          { type: "text", name: "智能分类" },
        ],
        3: [
          { type: "idCard", name: "身份证" },
          { type: "businessLicense", name: "营业执照" },
          { type: "passport", name: "护照" },
        ],
      },
    };
  },
  watch: {
    $route: {
      handler() {
        this.type = this.$route.query.type;
        this.activeIndex = 0;
        if (this.labels[this.type]) {
          this.uploadUrl = this.tmpUlr + this.labels[this.type][0].type;
        } else {
          this.uploadUrl = Base_URL + "upload";
        }
        console.log(this.type, this.activeIndex);
      },
      deep: true,
    },
  },

  methods: {
    changeOrcType(type) {
      this.ocrType = type;
    },
    uploadSuccess(response) {
      console.log(response);
      this.url = Base_URL + response.json.filePath;
      this.srcList.splice(0, 1, this.url);
      this.uploadShow = false;

      if (response.json.lines) {
        let content = "";
        for (const index in response.json.lines) {
          const obj = response.json.lines[index];
          content += obj.content + "<br/>";
        }
        this.text = content;
      }
    },
  },
};
</script>
  
  <style scoped>
.main {
  background-color: #f0f6fe;
  overflow: hidden;
}
.type {
  width: 1100px;
  background: #fff;
  margin: 24px auto 0px;
  text-align: center;
}
.typeSpan {
  /* 通用表格 */
  display: inline-block;
  margin-top: 8px;

  width: 112px;
  height: 40px;
  opacity: 1;
  font-family: HelveticaNeue;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.02px;
  color: rgba(0, 12, 53, 0.7);
  line-height: 40px;
  cursor: pointer;
}
.active {
  /* 矩形备份 26 */
  display: inline-block;
  width: 112px;
  height: 40px;
  opacity: 1;
  background: #0039ff;
  color: #fff;
  font-family: HelveticaNeue;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.02px;
  border-radius: 10px 10px 0px 0px;
  line-height: 40px;
}
.type span:not(:first-child) {
  /* 通用表格 */
  margin-left: 100px;
}
.el-tabs--top {
  background-color: #fff;
  width: 1100px;
  margin: auto;
  /* margin-top: 15px; */
}
.content {
  display: flex;
  text-align: center;
  justify-content: center;
  background-color: #f0f6fe;
  margin: auto;
  background-color: #fff;
  width: 1100px;
}
.content > section {
  height: 400px;
  border: 1px solid #d0d4e4;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.left {
  border-right: 0 !important;
  width: 600px;
  margin-left: 24px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.right {
  width: 500px;
  margin-right: 24px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.el-row {
  display: flex;
  justify-content: center;
  padding-top: 25px;
}
.el-row > button:first-child {
  margin-left: 0px !important;
}
.el-button {
  margin-left: 45px !important;
}
/* .el-button:not(:first-child){
     border: 0px !important;
    background-color: #f0f6fe !important; 
  } */
.el-tabs {
  display: flex;
  justify-content: center;
  background-color: #f0f6fe;
}
.el-tabs__header {
  background: #fff;
  /* padding-bottom: 15px !important; */
  margin: 0px !important;
}
.el-tabs__nav-wrap {
  width: 1100px;
  background-color: #fff;
}
.el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}
.el-tabs__item {
  padding: 0px 36px !important;
}
.el-tabs__nav-wrap::after {
  background-color: #fff !important;
}
.demo-image__preview {
  position: relative;
  height: 85%;
}
.cancel {
  width: 22px;
  height: 22px;
  float: right;
  position: absolute;
  top: -11px;
  right: -11px;
  z-index: 111;
  background-color: #ffffff;
  border-radius: 50%;
}
.uploadImg {
  /* margin: 5%; */

  height: 100%;

  overflow: hidden;
}

.demo {
  width: 1100px;
  margin: auto;
  background-color: #fff;
}
.demo > p {
  margin: 0;
  padding-top: 16px;
  font-family: HelveticaNeue;
  font-size: 16px;
  font-weight: normal;
  margin-left: 24px;
  height: 100%;
  overflow: auto;
}
.demo > img {
  width: 192px;
  height: 150px;
  margin-top: 8px;
}
.demo > img:not(:first-child) {
  margin-left: 75px;
}
.text {
  text-align: left;
  height: 100%;
  overflow: auto;
}
</style>
  